import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";//记录组件行为
import Button from "./button";
import '../../styles/index.scss'

const styles={
  textAlign:'center',
  padding:24
}
//配置样式，使组件居中显示
const centerDecorator=(storyFn)=><div style={styles}>
  {(storyFn())}
</div>

const defaultButton = () => {
  return <Button onClick={action("clicked")}>默认按钮</Button>;
};

const sizeButton = () => {
  return <>
    <Button size="lg">大按钮</Button>
    <Button btnType="default">默认按钮</Button>
    <Button size="sm">小按钮</Button>
  </>;
};

const typeButton = () => {
  return <>
    <Button btnType="default">默认按钮</Button>
    <Button btnType="primary">primary按钮</Button>
    <Button btnType="danger">danger按钮</Button>
    <Button btnType="link">link按钮</Button>
  </>;
};

storiesOf("Button Component", module)
.addDecorator(centerDecorator)
  .add("默认按钮", defaultButton)
  .add("按钮大小", sizeButton)
  .add("主题按钮",typeButton);

